<route lang="json5" type="page">
	{
	  style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '',
	  },
	}
</route>
<template>
	<view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">

		<view class="main-title-head  flex flex-row flex-justify-center"
			style="letter-spacing: 1px;align-items: center;position: relative;">
			<i class="iconfont icon-jiantou" style="position: absolute;left: 20px;color: #F4F6F9;" @click="goLast"></i>
			<p class="font-550" style="color: aliceblue;left: 0;">晚签看板</p>
		</view>

		<view class="flex flex-row flex-justify-center ma-7" style="margin-bottom: 1rem;">
			<img src="../../static/images/a.jpg" alt="" style="width: 160rpx;height: 160rpx;border-radius: 50%;">
			<view class="admin-negativePerson">
				<p>陈品天</p>
				<p style="font-size: 19px;">👏你好，欢迎来到综合看板</p>
			</view>
		</view>

		<view class="w-100% flex flex-col" style="align-items: center;">

			<view class="w-85% clockInRecords flex flex-justify-around" style="height: 9vh;">

				<view class="flex flex-col flex-justify-center">
					<p class="font-600 font-size-4" style="text-align: center;">6</p>
					<p style="color: gray;text-align: center;">管理班级</p>
				</view>


				<view class="flex flex-col flex-justify-center">
					<p class="font-600 font-size-4" style="text-align: center;">300</p>
					<p style="color: gray;text-align: center;">管理学生</p>
				</view>

			</view>


			<view class="w-85% flex flex-justify-between border-gary" style="height: 6vh;align-items: center;">

				<p style="font-size: 18px;font-weight: 700;margin-left: 1vh;">日期选择器</p>
				<picker mode="date" :value="date" fields="day" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<p class="uni-calendar__header-text" style="text-align: center;font-weight: 600;">
						{{ date }}
						<span style="font-size: 15px;color: grey;">></span>
					</p>
				</picker>

			</view>

			<view class="w-87% flex flex-justify-between" style="height: 6vh;align-items: center;">
				<p style="font-size: 18px;font-weight: 700;">今日情况</p>
				<p style="font-size: 15px;">出勤明细</p>
			</view>

			<view class="w-87% clockInRecords">

				<view class="w-90% grid grid-cols-4  mx-auto">
					<view class="flex flex-col flex-justify-center">
						<p class="font-600 font-size-4">270</p>
						<p style="color: gray;">在校住宿</p>
					</view>


					<view class="flex flex-col flex-justify-center">
						<p class="font-600 font-size-4">12</p>
						<p style="color: gray;">外出住宿</p>
					</view>

					<view class="flex flex-col flex-justify-center">
						<p class="font-600 font-size-4">18</p>
						<p style="color: gray;">走读学生</p>
					</view>

					<view class="flex flex-col flex-justify-center">
						<p class="font-600 font-size-4">0</p>
						<p style="color: gray;">异常</p>
					</view>
				</view>

			</view>

			<view class="w-87% clockInRecords" style="height: 22vh;font-size: 13px;flex-direction: column;">

				<view style="margin-top: 10rpx;margin-left: 15rpx;" class="w-60%">
					<p class="font-550" style="text-align: start;">签到情况汇总</p>
				</view>

				<view class="flex flex-col w-80" style="margin-top: -10px;">
					<view class=" charts-box">
						<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :canvas2d="true"
							canvasId="IUokPMNZrhrxybkwUjhUBkmHjlxXkeuj" />
					</view>
				</view>
			</view>

			<view class="w-87% flex flex-justify-between" style="height: 6vh;align-items: center;">
				<p style="font-size: 18px;font-weight: 700;">各班情况</p>
				<p style="font-size: 15px;">管理班级</p>
			</view>

			<view class="w-87%">

				<view class="w-100% grid grid-cols-2 grid-gap-3 mx-auto">
					<view class="flex flex-col flex-justify-center pa-2"
						style="background-color: #F4F6F9;border-radius: 15rpx;">
						<p class="font-600" style="font-size: 14px;margin-bottom: 5px;">2023级计科一班</p>
						<view class="class-lateSign-details">
							<p>在校：50</p>
							<p>在外：1</p>
							<p>异常：8</p>
							<p>走读：5</p>
						</view>
						<p class="font-600 class-lateSign-viewDetails">查看详情</p>
					</view>


					<view class="flex flex-col flex-justify-center pa-2"
						style="background-color: #F4F6F9;border-radius: 15rpx;">
						<p class="font-600" style="font-size: 14px;margin-bottom: 5px;">2023级计科一班</p>
						<view class="class-lateSign-details">
							<p>在校：50</p>
							<p>在外：1</p>
							<p>异常：8</p>
							<p>走读：5</p>
						</view>
						<p class="font-600 class-lateSign-viewDetails">查看详情</p>
					</view>

					<view class="flex flex-col flex-justify-center pa-2"
						style="background-color: #F4F6F9;border-radius: 15rpx;">
						<p class="font-600" style="font-size: 14px;margin-bottom: 5px;">2023级计科一班</p>
						<view class="class-lateSign-details">
							<p>在校：50</p>
							<p>在外：1</p>
							<p>异常：8</p>
							<p>走读：5</p>
						</view>
						<p class="font-600 class-lateSign-viewDetails">查看详情</p>
					</view>

					<view class="flex flex-col flex-justify-center pa-2"
						style="background-color: #F4F6F9;border-radius: 15rpx;">
						<p class="font-600" style="font-size: 14px;margin-bottom: 5px;">2023级计科一班</p>
						<view class="class-lateSign-details">
							<p>在校：50</p>
							<p>在外：1</p>
							<p>异常：8</p>
							<p>走读：5</p>
						</view>
						<p class="font-600 class-lateSign-viewDetails">查看详情</p>
					</view>
				</view>

			</view>



		</view>

		<view></view>
		<view></view>

	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';


let clockInDate = ref<string>("2024年09月01日")



// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 定义类型  
type DateString = string;
const date = ref<DateString>(getDate({ format: true }));


// 计算属性  日期
const startDate = computed<DateString>(() => getDate('start'));
const endDate = computed<DateString>(() => getDate('end'));


// 初始化chartData和opts  
const chartData = ref<any>({});
const opts = ref<any>({
	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
	padding: [5, 5, 5, 5],
	enableScroll: false,
	legend: {
		show: false,
	},
	extra: {
		pie: {
			activeOpacity: 0.5,
			activeRadius: 10,
			offsetAngle: 0,
			labelWidth: 15,
			border: true,
			borderWidth: 3,
			borderColor: "#FFFFFF",
			linearType: "custom",
			customRadius: 65
		}
	}
});

function bindDateChange(e: any) {
	date.value = e.detail.value;
}

// 辅助函数  
function getDate(type?: 'start' | 'end' | { format: boolean }): DateString {
	const date = new Date();
	let year = date.getFullYear();
	let month = String(date.getMonth() + 1).padStart(2, '0');
	let day = String(date.getDate()).padStart(2, '0');

	if (typeof type === 'string') {
		if (type === 'start') {
			year -= 60;
		} else if (type === 'end') {
			year += 2;
		}
	} else if (type && type.format) {
	}

	return `${year}-${month}-${day}`;
}

// 替代Vue 2的onReady，使用onMounted  
onMounted(async () => {
	await getServerData();
});

// 模拟从服务器获取数据  
async function getServerData() {
	// 模拟从服务器获取数据时的延时  
	await new Promise(resolve => setTimeout(resolve, 500));

	// 模拟服务器返回数据  
	let res = {
		series: [
			{
				data: [
					{ name: "未签到", value: 5 },
					{ name: "已签到", value: 150 },
					{ name: "校外签到", value: 100 },
				]
			}
		]
	};

	// 更新chartData  
	chartData.value = res;
}

const goLast = () => {
	uni.navigateBack({
		delta: 1
	});
}
</script>

<style scoped>
.border-gary {
	border-bottom: 1px solid rgba(128, 128, 128, 0.131);
}


.main-title-head {
	/* width: 746rpx; */
	height: 5.7vh;
	background: linear-gradient(to right, #2B87F6, #2B71F6);
	box-shadow: 0 5px 5px -5px rgba(42, 127, 177, 0.5), 0 8px 10px -5px rgba(24, 54, 72, 0.5);
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
	padding: 12rpx 0 12rpx 38rpx;
}

.wid {
	width: 746rpx;
}

.wid>img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
}

.admin-negativePerson {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 35rpx;
}

.admin-negativePerson>p {
	font-size: 26px;
	font-weight: 600;
}

.clockInRecords {
	border: 0.5px solid rgba(178, 175, 175, 0.224);
	border-radius: 20rpx;
	height: 9vh;
	margin-top: 1.1vh;
	margin-bottom: 1.5vh;
	box-shadow: 1px 1px 3px -2px rgba(131, 136, 138, 0.5), 2px 2px 5px 1px rgba(179, 194, 203, 0.5);
	display: flex;
	flex-direction: row;
}

.clockInRecords p {
	text-align: center;
}

.charts-box {
	width: 100%;
	height: 300rpx;
}

.class-lateSign-details {
	margin-bottom: 5px;
	width: 80%;
}

.class-lateSign-details>p {
	color: rgb(70, 69, 69);
	font-size: 13px;
	float: left;
	margin-right: 15rpx;
}

.class-lateSign-viewDetails {
	font-size: 14px;
	background-color: #1685FC;
	color: #fff;
	text-align: center;
	width: 120rpx;
	border-radius: 10rpx;
}
</style>
